<template>
  <div class="result">
    <Loading :loading="isLoading" fixed></Loading>
    <van-skeleton avatar avatar-shape="square" title v-if="showSkeleton" />
    <van-skeleton :row="2" v-for="item in 8" v-if="showSkeleton" />
    <div class="content" v-if="!showSkeleton">
      <div class="list" v-for="name, index in multimatch.orders" :key="index">
        <div v-for="item in multimatch[name]">
          <!-- 专辑 -->
          <div class="album match" v-if="name == 'album'" @click="play('album')">
            <div class="pic">
              <img :src="item.picUrl" />
            </div>

            <p>
              <span class="text-overflow-1">专辑：{{ item.name }}</span>
              <span class="text-overflow-1 font-fu">{{ item.alias[0] }}</span>
            </p>
          </div>

          <!-- 歌手 -->
          <div class="artist match" v-if="name == 'artist'" @click="play('artist')">
            <div class="pic">
              <img :src="item.img1v1Url" />
            </div>
            <p>
              <span class="text-overflow-1">
                歌手：{{ item.name }}
              </span>
            </p>
          </div>

          <!-- 歌单 -->
          <div class="artist match" v-if="name == 'playlist'" @click="play('playlist', item.id)">
            <div class="pic">
              <img :src="item.coverImgUrl" />
            </div>
            <p>
              <span class="text-overflow-1">
                歌单：{{ item.name }}
              </span>
            </p>
          </div>
          <van-divider :style="{ margin: '8px 0', borderColor: '#f5f5f5' }" v-if="name != 'new_mlog'" />
        </div>
      </div>

      <!-- 歌曲列表 -->
      <div class="song-list match">
        <li v-for="item in songs" @click="playSongs(item.id)">
          <div class="song-info">
            <p class="text-overflow-1">{{ item.name }}</p>
            <p class="info text-overflow-1">
              <van-tag color="#FCCCBB" plain v-if="item.sq != null">sq</van-tag>
              <span class="ar">
                <b v-for="ar in item.ar">
                  {{ ar.name }}
                </b>
              </span> -
              <span>{{ item.al.name }}</span>
            </p>
          </div>
          <van-icon class="song-icon" name="play-circle-o" size="25" color="#B3B3B3" />
        </li>
      </div>
    </div>
    <van-empty image=" search" v-if="multimatch.length == 0 && songCount == 0 && isLoading == false"
      description="暂无相关内容" />
  </div>
</template>

<script setup>
import { reactive, toRefs, ref } from 'vue'
import { Toast } from 'vant';
import { getSearchMultimatch, getSearchMusic } from '@/request/api/musicApi'
import Loading from '@/components/common/Loading.vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { PlayStore } from '@/store/playlist'
import { getSongDetail } from '@/request/api/musicApi'
const $router = useRouter();

const $store = PlayStore();
let { storePlaySong } = storeToRefs($store);


let isLoading = ref(true);

// 获取结果
let multimatch = ref([]);
let songs = ref([]);
let songCount = ref(0)
let showSkeleton = ref(true);
const getMultimatch = async (keywords) => {
  showSkeleton.value = true;
  isLoading.value = true;
  // 搜索歌曲
  await getSearchMusic({ keywords: keywords }).then(data => {
    console.log("songs==>", data);
    songs.value = data.result.songs;
    songCount.value = data.result.songCount
  });

  // 综合搜索，包含歌单、歌手、专辑等
  await getSearchMultimatch({ keywords: keywords }).then(data => {
    console.log("multimatch==>", data);
    multimatch.value = data.result;
  });

  showSkeleton.value = false;
  isLoading.value = false;
}

// 点击多重信息
const play = (name, id) => {
  if (name == 'artist' || name == 'album') return Toast('点击了' + name);
  if (name == 'playlist') {
    $router.push({
      path: '/music/musicListDetail',
      query: { id }
    })
  }
}

// 点击播放歌曲
const playSongs = async (id) => {
  await getSongDetail({ ids: id }).then(data => {
    let song = data.songs[0]
    let songData = {
      album: song.al,
      artists: song.ar,
      duration: song.dt / 1000,
      musicId: song.id,  //音乐ID
      musicName: song.name
    }
    $store.storePlaySong(songData)
  })
}



// 重置数据
const resetData = () => {
  multimatch.value = [];
  songs.value = [];
  songCount.value = 0;
  isLoading.value = true;
}

defineExpose({
  getMultimatch,
  resetData
})
</script>
  
<style lang='less' scoped>
.van-skeleton {
  margin-bottom: 60px;
}

:deep(.van-skeleton__title) {
  width: 100%;
}

:deep(.van-skeleton__avatar) {
  width: 80px;
  height: 80px;
}

.result {
  background-color: #FFf;
}

.content {
  padding: 20px;
  box-sizing: border-box;

  .list {
    .match {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      font-size: 35px;

      .pic {
        width: 100px;
        margin-right: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      p {
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        span {
          width: 100%;

          &.font-fu {
            font-size: 25px;
            margin-top: 5px;
          }
        }
      }
    }
  }

  .song-list {
    li {
      padding: 10px 5px;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;
      font-size: 34px;
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      justify-content: space-between;
      align-items: center;

      .song-info {
        max-width: 90%;
      }

      .info {
        font-size: 20px;
        margin-top: 10px;
        color: @font-fu;

        .van-tag {
          font-size: 12px;
          padding: 0 10px;
          margin-right: 10px;
        }

        b {
          font-weight: normal;
        }

      }
    }

  }
}
</style>